.submenu {
    @apply flex box-border border-r border-solid border-gray-300;

    min-width: 186px;
    height: 100dvh;

    &-nav {
        min-width: 86px;
        @apply py-4 pl-2 flex flex-col bg-purple-50;

        h2 {
            @apply pl-2 pr-4 h-10 text-lg font-semibold;

            min-height: 40px;
        }

        ul {
            @apply space-y-1;
        }

        li {
            @apply relative flex items-center cursor-pointer pl-2 pr-4 rounded-l-lg h-10 leading-10 transition-colors;

            svg {
                @apply block w-4 h-4 mr-2;

                min-width: 16px;
            }

            i {
                @apply hidden absolute right-0 w-2 h-2 bg-white;

                &::before {
                    @apply block w-full h-full bg-purple-50;

                    content: '.';
                    text-indent: -9999px;
                }

                &.corner-top {
                    @apply -top-2;

                    &::before {
                        clip-path: ellipse(100% 100% at 0% 0%);
                    }
                }

                &.corner-bottom {
                    @apply -bottom-2;

                    &::before {
                        clip-path: ellipse(100% 100% at 0% 100%);
                    }
                }
            }

            &:hover {
                @apply text-purple-400;
            }

            &.active {
                @apply cursor-default bg-white text-purple-400;

                i {
                    @apply block;
                }
            }
        }
    }

    &-links {
        @apply overflow-auto h-full bg-white px-2 py-3;

        width: 100px;

        ul {
            @apply space-y-1;
        }

        li {
            @apply cursor-pointer px-2 rounded-lg h-10 leading-10 truncate transition-colors;

            &:hover {
                @apply bg-purple-50;
            }

            &.active {
                @apply cursor-default bg-purple-50 text-purple-400;
            }
        }
    }
}

.words {
    width:28px;
    text-overflow: clip;
    white-space:nowrap;
    /*有些示例里需要定义该属性，实际可省略*/
    display: -webkit-box;
    -webkit-line-clamp: 1;
    /*规定超过两行的部分截断*/
    overflow: hidden;

}